import createModulePage from "../../../components/modulepage/index";

import { KxAppSubModule} from "../submodule";

import { HttpTaskTraits } from "../traits/http";

import { GLOBAL_APP_CLS } from "../../../variable";

import { pageName, componentName, refName } from "./variable";

class Module extends KxAppSubModule {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
    <div ref="${refName}" class="action app-action">
    </div>
    <h5>fontawesome图标</h5>
    <iframe src="http://www.fontawesome.com.cn/faicons/" style="width: 100%; height: 530px;" frameborder="0"></iframe>
    <h5>app图标</h5>
    <div class="${GLOBAL_APP_CLS}-grid-wrapper--default">
        <div class="${componentName}-app">
            <div v-for="icon in icons" 
                class="${componentName}-app__item" :class="icon.cls"><span>{{icon.name}}</span></div>
        </div>
    </div>                      
</div>`;
    }   
    
    _traits(instance) {
        return [ 
            new HttpTaskTraits(instance, `private_${pageName}_traits`) 
        ]
    }


    _mounted() {        
        var self = this;         
        self[`private_${pageName}_traits`].init({
            onError: function (error) {
                if (self.$refs[refName]) {
                    window.app.onError(error)
                }
            }
        });

        setTimeout(function () {
            self.search();
        }, 0);
    }

    _methods(instance) {
        return {
            search(page = 1) {
                var self = this;
            },
            onSearch(data) {
                var self = this;
                self.search();
            },
            onPageChange(page) {
                var self = this;
                self.search(page);
            }
        }
    }
    _data() {
        var ret = {};
        ret.icons = [
            "crm"
        ].map(function (v) {
            return {
                name: v,
                cls: `icon-${v}`
            }
        });

        return ret;
    }  
}


window.AUICustomComponents.define(`kx-app-${pageName}-module`, Module);

export default createModulePage(
    `<kx-app-${pageName}-module></kx-app-${pageName}-module>`
);